/*
  学习目标：知道React中this指向问题, 知道处理办法
  特点: 
    1. React自带结构体中this指向组件实例, React源码内部处理this
        : render 生命周期钩子函数,属于自带结构体
    2. React非自带结构体中this指向undefined
  原理: 通过箭头函数自动绑定this解决
  步骤：
     1. 👍在render函数内, 使用箭头函数绑定事件 
     2. 👍使用箭头定义事件
     3. 👎通过bind主动改变this指向
*/

import React, { Component } from 'react';

export default class App extends Component {
  state = { count: 100 };

  handleClick() {
    console.log('this  ----->  ', this);
  }

  render() {
    return (
      <div>
        <h1>{this.state.count}</h1>

        {/* ES5语法：通过bind主动改变this指向  */}
        <button onClick={this.handleClick.bind(this)}>点我访问this</button>
      </div>
    );
  }
}
